<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义指令</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="app">
    <div>
      <input type="text" id="ipt1" ref="ipt1" />
      <input type="text" id="ipt2" v-focus />
    </div>
    <div>
      <Child ref="child"></Child> <button @click="handleClick">修改Child的msg</button>
    </div>
    <div>
      <span v-font:weight.100="color">span content</span>
      <span v-font:size.100px="'green'">
        span2
      </span>
    </div>
  </div>
  <script type="module">
    import './font-directive.js'
    import { Child } from './child.js'
    new Vue({
      el: '#app',
      async mounted() {
        // document.querySelector('#ipt1').focus()
        // document.querySelector('#ipt2').focus()
        // this.$refs.ipt1.focus()
      },
      data() {
        return {
          color: 'purple'
        }
      },
      components: {
        Child
      },
      methods: {
        handleClick() {
          // this.$refs.child.changeMsg()
          this.$refs.child.msg = 100
        }
      },
      directives: {
        focus: {
          inserted(el) {
            el.focus()
          }
        }
      }
    })
  </script>
</body>
</html>